<template>
  <div>
    <el-checkbox-group v-model="checkedList" @change="handleCheckedChange" class="grid grid-cols-3 gap-20px">
      <template v-for="item in props.dataList" :key="item">
        <div class="w-100% h-280px flex flex-col justify-center mr-5px  box-border">
          <el-checkbox :label="item.name" :value="item.id">
            <img :src="item.url" alt="" class="w-250px h-180px" />
            <p class="c-#000"> {{ item.name }}</p>
            <div class="flex justify-between items-center c-#BDBDBD font-size-13px">
              <span>格式：JPG</span>
              <span>大小；1264KB</span>
            </div>
            <el-divider border-style="dashed" />
            <el-button type="primary" size="small">查看详情</el-button>
            <el-button type="success" size="small">下载申请</el-button>
          </el-checkbox>
        </div>
      </template>
    </el-checkbox-group>
  </div>
</template>
<script setup>
import { ref } from 'vue'

const props = defineProps({
  dataList: {
    type: Array,
    default: () => []
  }
})

const checkedList = ref([])
const isIndeterminate = defineModel()
const handleCheckedChange = (value) => {
  const checkedCount = value.length
  isIndeterminate.value = checkedCount > 0 && checkedCount < props.dataList.length
}
defineExpose({
  checkedList,
})
</script>
<style scoped lang="scss">
:deep(.el-divider--horizontal) {
  margin: 10px 0 !important;
}
</style>
